<template>
    <div class="container">
        <div class="message" v-if="bottles.length === correct">全部正确</div>
        <div class="message" v-else>正确数量为：<b>{{correct}}</b></div>
        <div class="shelf" ref="sortableShelf">
            <div class="bottle-box" :class="{active: swapIndexes.includes(idx)}"  v-for="(bottle, idx) in randomBottles" :key="bottle.index" @click="swap(idx)">
                <Bottle class="bottle-item"  :height="bottle.height" :color="bottle.color" />
            </div>
            
        </div>

        <div class="shelf standard-shelf" :class="{show: bottles.length === correct}">
            <div class="bottle-box" v-for="(bottle, idx) in bottles" :key="bottle.index" @click="swap(idx)">
                <Bottle class="bottle-item"  :height="bottles.length === correct ? bottle.height: 100" :color="bottles.length === correct ? bottle.color : '#999999'" />
            </div>
        </div>
        <div class="tool-bar">
            <button class="btn btn-start" @click="start">开始</button>
        </div>
    </div>  
  </template>
  
  <script>

  
  import Sortable from 'sortablejs'
  import Bottle from '@/components/Bottle.vue';
  
  export default {
    name: 'GamePage',
    components: {
        Bottle
    },
    data(){
      return {
        mode: 'game',
        bottles: [],
        randomBottles: [],
        number: 7,
        swapIndexes:[]

      }
    },
    mounted(){
        this.start();
        // Sortable.create(this.$refs.sortableShelf, {
        //     handle: ".bottle-item",
        //     animation: 150,
        //     forceFallback: true,
        //     ghostClass: 'custom-ghost',
        //     onStart: (evt) => evt.item.style.visibility = 'hidden',
        //     onEnd: evt => {
        //         evt.item.style.visibility = 'visible'
        //         let newIndex = evt.newIndex;
        //         let oldIndex = evt.oldIndex;
        //         let bottles = [... this.randomBottles];
        //         const oldItem = bottles[oldIndex];
        //         bottles.splice(oldIndex, 1);
        //         bottles.splice(newIndex, 0, oldItem);
                
        //         this.randomBottles = [... bottles];
                

        //     }
        // });
        window.addEventListener("keyup", (e) => {
            
            let key = e.key;
            if(e.keyCode > 48 && e.keyCode < 58 || e.keyCode > 96 && e.keyCode < 106){
                let index = key * 1;
                if(index > this.bottles.length){
                    return ;
                }
                this.swap(index -1)
            }
            
            
        });
    },
    watch: {
        '$store.state.app.appSize':{
            handler(val){
                if(val){
                    
                    this.appSize = {
                        width : val.width,
                        height : val.height
                    }
                }
                
            },
            immediate: true
        }
    },
    computed:{
        correctIndexes(){
            let indexes = [];
            this.randomBottles.forEach((item, index) => {
                if(item.index == index){
                    indexes.push(item.index);
                }
            })
            return indexes;
        },
        correct(){
            return this.correctIndexes.length;
        }
        
    },
    methods:{
        start(){
            let bottles = [];
            for(let i = 0; i < this.number; i++){
                let color = '#' + Math.floor(Math.random()*16777215).toString(16);
                let height = Math.floor(Math.random() * 60) + 20;
                bottles.push({
                    index: i,
                    color,
                    height
                })
            }
            this.bottles = bottles;
            this.randomBottles = [...this.bottles].sort(() => Math.random() - 0.5);

           
        },
        swap(idx){
            if(this.swapIndexes.includes(idx)){
                this.swapIndexes = []
                return ;
            }
            this.swapIndexes.push(idx);
            if(this.swapIndexes.length == 2){
                let idx1 = this.swapIndexes[0];
                let idx2 = this.swapIndexes[1];
                
                let bottle1 = this.randomBottles[idx1];
                let bottle2 = this.randomBottles[idx2];
                
                let bottles = [... this.randomBottles];
                bottles[idx1] = bottle2;
                bottles[idx2] = bottle1;
                this.randomBottles = [... bottles];

                
                this.swapIndexes = [];
            }
        }
    }
   
  }
  </script>
  
  <style scoped>
   .container{
    background: #044c40;
    width: 100%;
    min-height: 100%;
    box-sizing: border-box;
    padding-top:40px;
    padding-bottom: 40px;

    .shelf{
        display: flex;
        justify-content: space-between;
        border-bottom: 3px solid #77a81a;
    }

    .standard-shelf{
        
    }
   }
   .wrapper{
    margin: auto;
    width: 1920px;
    transform-origin: left top;
    position: fixed;
    left: 0;
    top: 50%;
   }

   .message{
    text-align: center;
    height: 100px;
    line-height: 100px;
    color: #FFFFFF;
    font-size: 40px;

    b{
        color:rgb(230, 127, 48);
    }
   }


   .shelf{
    
        height: 250px;
        padding:20px 100px;

        .bottle-box{
            &.active{
                background-color: rgba(230, 230, 2, 0.4);
            }
        }
   }


   .tool-bar{
        margin: 50px auto;

        .btn{
            border: none;
            background-color: #1890ff;
            color: #FFFFFF;
            padding: 10px 40px;
            line-height: 1.5;
            font-size: 30px;
            cursor: pointer;

            border-right: 1px solid #044c40;

            &:last-child{
                border-right: none;
            }

            

            &:disabled{
                background:rgba(24, 24, 24, 0.5);
                cursor: default;
            }
            &.btn-date{
                background:rgba(24, 144, 255, 0.5);
                color: rgb(230, 127, 48);
            }
           
        }

    }




    


    
  </style>
  